body {
    margin: 0;
    padding: 0;

    .sun {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffeea2;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        clip-path: inset(0px 50% 0px 0px);

        &:after {
            content: '';
            display: block;
            width: 400px;
            height: 400px;
            background-color: orange;
            border-radius: 50%;
        }
    }

    .sea {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30%;
        z-index: 2;
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
    }

    .moon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #040720;
        display: flex;
        justify-content: center;
        align-items: center;

        &:after {
            content: '';
            display: block;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            box-shadow: 150px 100px 0px cyan;
            transform: translate(-150px, -100px);
        }
    }
}